{% extends "base.htm" %} 

{% block main_content %}

<p>
<input type="radio" id="uploadImageOption1" name="uploadImageOption" value="normal" /><label
							for="uploadImageOption1">Upload normal</label>
<form action="/images" id="uploadNormalFrom"  method="POST" enctype="multipart/form-data">
	<input type="file" name="img" /><input type="submit" value="Upload" />
</form>
</p>

{% if blobstore_upload_url %}
<p><input type="radio" id="uploadImageOption2" name="uploadImageOption" value="blob"  /><label
							for="uploadImageOption2">Upload to Blobstore</label>
<form action="{{ blobstore_upload_url }}" id="uploadBlobFrom"  method="POST" enctype="multipart/form-data">
	<input type="file" name="img" /><input type="submit" value="Upload" />
</form></p>
{% endif %}

{% if key and keyType %}
<div class="title2">Original picture</div>
<p><img src="/images/processor?key={{ key }}&keyType={{ keyType }}" /></p>
<br />
<div class="title2">Processed picture</div> 
<i>{% ifequal keyType 'datastore' %}
	The Image API processed directly image binary data
	{% else %}
	The image was stored in Blobstore service and the Image API used blob key to process it
	{% endifequal %}</i>
<table class="data_table">
<tr>
<td>
<ul><li><span class="link_command" id="resizeCommand" ctrlId="resizeImage">Resize</span></li>
<li><span class="link_command" id="rotate90Command" ctrlId="rotate90Image">Rotate 90</span></li>
<li><span class="link_command" id="rotateN90Command" ctrlId="rotateN90Image">Rotate -90</span></li>
<li><span class="link_command" id="flipHorCommand" ctrlId="flipHorImage" >Flip Horizontally</span></li>
<li><span class="link_command"  id="flipVerCommand" ctrlId="flipVerImage">Flip Vertically</span></li>
<li><span class="link_command" id="cropCommand" ctrlId="cropImage">Crop</span></li>
<li><span class="link_command" id="luckyCommand" ctrlId="luckyImage">I'm Feeling Lucky</span></li>
</ul>

</td><td>
<img src="/images/processor?key={{ key }}&keyType={{ keyType }}&action=re" style="display: none;" id="resizeImage" />
<img src="/images/processor?key={{ key }}&keyType={{ keyType }}&action=ro&param=90" style="display: none;" id="rotate90Image" />
<img src="/images/processor?key={{ key }}&keyType={{ keyType }}&action=ro&param=-90" style="display: none;" id="rotateN90Image" />
<img src="/images/processor?key={{ key }}&keyType={{ keyType }}&action=f&param=h" style="display: none;" id="flipHorImage" />
<img src="/images/processor?key={{ key }}&keyType={{ keyType }}&action=f&param=v" style="display: none;" id="flipVerImage" />
<img src="/images/processor?key={{ key }}&keyType={{ keyType }}&action=c" style="display: none;" id="cropImage" />
<img src="/images/processor?key={{ key }}&keyType={{ keyType }}&action=l" style="display: none;" id="luckyImage" />
</td></tr></table>

{% endif %}

	<script type="text/javascript">
	
	$( function() {
		{% if blobstore_upload_url %}
		$('#uploadImageOption1, #uploadImageOption2').click(
			function() {
				var vl = $(this).val();
				var speed = 'slow';
				var frmNormal = $("#uploadNormalFrom");
				var frmBlob = $("#uploadBlobFrom");
				if( vl=='normal' ) {
					frmNormal.show(speed);
					frmBlob.hide(speed);
				} else {
					frmNormal.hide(speed);
					frmBlob.show(speed);
				}
			}		
		);
		$("#uploadBlobFrom").css('display','none');
		$('#uploadImageOption1').click();
		{% endif %}
		
		{% if key and keyType %}
		var previousCtrlId = null;
		$('#resizeCommand, #luckyCommand, #rotate90Command, #rotateN90Command, #flipHorCommand, #flipVerCommand, #cropCommand').click(
			function() {
				if( previousCtrlId ) {
					imgCtrl = $('#'+previousCtrlId);
					imgCtrl.hide('fast');
				}
				
				var me = $(this);				
				var imgCtrl = $('#'+me.attr('ctrlId'));
				imgCtrl.show('fast');
				previousCtrlId = me.attr('ctrlId');
			}	
		);
		{% endif %}
	} );
	
	</script>

{% endblock %}
